<style>
.product_cover{
	width:55px;
	height:55px;
}
.brower_cover > *{
	display:inline-block;
	vertical-align:middle;
}
.back_btn{
	width:650px;
	font-size:20px;
	margin:0 auto;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor:pointer;
}
.back_btn:before{
	margin-right:10px;
}
</style>
<div class="product_list" *ngIf="!showAddProduct">
	<div class="tool_bar">
		<button (click)="showAddProduct=true">添加商品</button>
	</div>
	<table class="grid_table order_table">
		<tr>
			<th width="80">商品图片</th>
			<th width="200">商品名称</th>
			<th width="90">商品单价</th>
			<th width="90">入货单价</th>
			<th width="80">库存数量</th>
			<th width="80">已售数量</th>
			<th width="70">状态</th>
			<th>所属分类</th>
			<th width="160">操作</th>
		</tr>
		<tbody>
			<tr *ngFor="let p of products">
				<td><img class="product_cover" src="{{p.image[0].img_small}}"/></td>
				<td>{{p.name}}</td>
				<td>{{p.price_cost}}</td>
				<td>{{p.price}}</td>
				<td>{{p.innage}}</td>
				<td>{{p.sales}}</td>
				<td>{{p.status}}</td>
				<td>{{p.typeInfo[0]?p.typeInfo[0].name:''}}</td>
				<td>
					<button (click)="edit(p);">编辑</button>
					<button (click)="upOrDown(p);" *ngIf="p.status=='0'">上架</button>
					<button (click)="upOrDown(p);" *ngIf="p.status=='1'">下架</button>
					<button (click)="deleteProduct(p);" *ngIf="p.status=='0'">删除</button>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<div style="width:650px;margin:0 auto;" *ngIf="showAddProduct">
<div class="icon-back back_btn" (click)="showAddProduct=false">返回</div>
<div class="pane_block" style="width:650px;margin-bottom:70px;margin-top:10px;">
	<div class="pane_block_title">添加商品</div>
	<form name="libraryForm" class="dialog_form" #addProductForm nnovalidate>
	<table>
	<tr>
		<th width="140">商品名称</th>
		<td width="350"><input name="name" type="text" [(ngModel)]="product.name" placeholder="请输入商品名称"/></td>
		<td></td>
	</tr>
	<tr>
		<th>商品单价</th>
		<td class="colors">
			<input type="number" name="color" [(ngModel)]="product.price" />
		</td>
		<td></td>
	</tr>
	<tr>
		<th valign="top" style="padding-top: 16px;">入货单价</th>
		<td>
			<input type="number" name="price_cost" [(ngModel)]="product.price_cost" />
			<div class="field_tip">填写后系统可帮您计算各个商品的经营状况，此项非必填</div>
		</td>
		<td></td>
	</tr>
	<tr>
		<th>库存</th>
		<td>
			<input type="number" name="innage" [(ngModel)]="product.innage" />
		</td>
		<td></td>
	</tr>
	<tr>
		<th valign="top">商品简介</th>
		<td>
			<textarea rows="5" name="content" [(ngModel)]="product.content"></textarea>
		</td>
		<td></td>
	</tr>
	<tr>
		<th valign="top">商品图片</th>
		<td class="brower_cover"style="font-size:0;" valign="middle">
			<img src="{{selectedImg.img_small}}" alt="" style="width:100px;height:100px;margin-right:20px;"/>
			<button type="button" (click)="selectImages();">选择图片</button>
		</td>
		<td></td>
	</tr>
	<tr>
		<th valign="top" style="padding-top: 14px;">立即上架</th>
		<td>
			<label class="checkbox">
				<input [(ngModel)]="product.status" name="status" type="checkbox"/>
				<span class="checkbox_text">若此项不勾选，商品将处于待上架状态</span>
			</label>
		</td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td align="right"><button type="button" (click)="addProduct()">保存商品</button></td>
		<td></td>
	</tr>
	</table>
	</form>
</div>
</div>